<template>
    <div class="container">
      <el-page-header @back="goBack" content="部门列表"></el-page-header>
      <div class="e-m-t-45 e-m-b-45">
        <el-radio-group v-model="dataType">
          <el-radio-button label="0">客户组列表</el-radio-button>
          <el-radio-button label="1">部门列表</el-radio-button>
        </el-radio-group>
      </div>
      <div class="e-m-t-30">
        <div class="flex">
          <div class="e-flex-1">
            <!-- <el-button type="primary" icon="el-icon-plus" plain @click="dialogVisible = true">新增客户组</el-button> -->
            <!-- <el-button type="primary" @click="down()" plain><i class="iconfont icon-excel e-m-r-5"></i>导入Excel</el-button> -->
          </div>
  
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="部门名称">
              <el-input placeholder="请输入" v-model="namekey" prefix-icon="el-icon-search" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getList">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- <el-row type="flex" justify="space-between" class="nav-bar e-m-b-20">
          <el-col :span="3">
              <el-button type="primary" @click="create" icon="el-icon-plus" size="small">新增</el-button>
          </el-col>
          <el-col class="text-right">
              <el-button type="primary" plain icon="el-icon-upload2" size="small">导入</el-button>
              <el-button plain icon="el-icon-download" size="small">下载</el-button>
          </el-col>
      </el-row> -->
      <el-table :data="tableData" :border="true" style="width: 100%" stripe @row-click="rowClick">
        <el-table-column fixed type="index" width="50">
        </el-table-column>
        <el-table-column prop="department" label="部门名称">
        </el-table-column>
        <el-table-column prop="citynames" label="所属地区" width="250">
        </el-table-column>
        <el-table-column prop="name" label="客户组名称" width="250">
          <template slot-scope="scope">
            <span><el-link type="primary" :href="'/Enterprise/views?id='+scope.row.id">{{ scope.row.name }}</el-link></span>
          </template>
        </el-table-column>
        <el-table-column prop="regdate" label="注册时间" width="150">
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="150">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="按住ctrl键+鼠标左键新窗口打开" placement="left-start">
              <el-button type="text" size="small" @click.stop="views($event,scope.row)">查看</el-button>
            </el-tooltip>
            <!-- <el-button type="text" size="small" @click="goGuest(scope.row.id)">查看推广客户</el-button>
              <el-button type="text" size="small" @click="goRecord(scope.row.id)">查看推广佣金</el-button> -->
            <!-- <el-button type="text" size="small">重置密码</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <el-pagination background layout="sizes, total, prev, pager, next" :total="total" :page-sizes="[10, 50, 100, 200]"
          :page-size="pageSize" :current-page="page" @current-change="pageChange" @size-change="handleSizeChange">
        </el-pagination>
      </div>
      <!-- 详情页面弹窗 -->
      <el-drawer
        title=""
        :visible.sync="viewShow.show"
        direction="rtl"
        size="80%"
        :with-header="false"
        >
        <enterpriseView v-if="viewShow.show" :id="viewShow.id" @goBack="viewShow.show = false"></enterpriseView>
        <!-- <enterpriseList :parentId="viewShow.id"></enterpriseList>   -->
        <!-- <departmentView v-if="viewShow.show" :id="viewShow.id" :eid="viewShow.eid" @goBack="viewShow.show = false"></departmentView> -->
      </el-drawer>
    </div>
  </template>
    
  <script>
  import enterpriseView from '@/components/enterprise-list/views.vue'
  export default {
    layout: 'admin',
    components:{
      enterpriseView
      // departmentView
    },
    head() {
      return {
        title: '客户组列表' 
      }
    },
    data() {
      return {
        viewShow:{
          id: 0,
          eid: 0,
          show: false //详情页面弹窗
        },
        fileList: [],
        loading: true,
        namekey: '',
        phonekey: '',
        page: 1,
        pageSize: 10,
        total: 8,
        tableData: [],
        addFormInputState: false,
        dataType: 1
      }
    },
    mounted() {
      this.getList()
    },
    computed: {
      headers() {
        return this.$store.state.header
      }
    },
    watch: {
      dataType(val) {
        console.log(val)
        if (val == 0) {
          this.$router.push({
            path: '/enterprise/list'
          })
        } else if (val == 1) {
          this.$router.push({
            path: '/enterprise/department/list'
          })
        }
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
      },
      getList() {
        this.tableData = []
        this.loading = true
  
        this.$axios.post('/Enterprise/List', {
          "PageIndex": this.page,
          "PageSize": this.pageSize,
          "Key": this.namekey,
          "parentId": -1,
          "order": [
            {
              "column": "regdate",
              "isDesc": false
            }
          ],
        }).then((res) => {
          this.loading = false
          this.tableData = res.rows;
          this.total = res.total;
        }).catch((err) => {
          this.loading = false
        })
      },
      views(event,row) {
        if (event.ctrlKey) {
          console.log('Ctrl + 左键点击');
          // 这里可以执行你需要的操作
          let param = []
          for(let k in this.param){
            if(this.param[k]){
              param.push(`${k}=${this.param[k]}`)
            }
          }
          this.$router.push(`/Enterprise/department/list?${param.join('&')}`)

          window.open('/Enterprise/department/views?id=' + row.id + '&eid='+ row.enterpriseid, '_blank');
        } else {
          console.log('普通点击');
          this.viewShow.id = row.id
          this.viewShow.eid = row.enterpriseid
          this.viewShow.show = true
        }
      },
      rowClick(row){
        this.viewShow.id = row.id
        this.viewShow.eid = row.enterpriseid
        this.viewShow.show = true
      },
      pageChange(e) { // 页码切换事件
        this.page = e;
        this.getList()
      },
      handleSizeChange(val) {
        this.page = 1;
        this.pageSize = val;
        this.getList()
      }
    }
  }
  </script>
    
  <style lang="scss" scoped></style>
    